<div class="row">
  <div class="col-sm-2">
    <button class="btn btn-primary" type="button" (click)="addSource()">
      <i class="fas fa-plus-circle"></i> Add new Source </button>
  </div>
  <div class="col-sm-10">
    <form [formGroup]="sourcesForm">
      <ng-container formArrayName="sources">
        <ng-container *ngFor="let source of sourcesForm['controls'].sources['controls']; let s=index">
          <div class="space-bottom card">
            <div class="card-header">Source: TypeID #{{source.get('type_id').value}}
              <span class="float-right">
                <button class="btn btn-link mr-1" type="button" data-toggle="collapse"
                        [attr.data-target]="['#collapseExample' + s]" aria-expanded="true">
                  <fa-icon [icon]="['far', 'edit']"></fa-icon>
                </button>
                <button class="btn btn-link" type="button" (click)="delSource(s)">
                  <fa-icon [icon]="['far', 'window-close']"></fa-icon>
                </button>
              </span>
            </div>
            <div class="card-body collapse show" id="collapseExample{{s}}">
              <ng-container formGroupName="{{s}}">
                <div class="form-group">
                  <label for="ng-select-valid">Type: <span class="required">*</span></label>
                  <ng-select
                    [items]="typeList"
                    id="ng-select-valid"
                    class="custom-select"
                    bindLabel="label"
                    bindValue="public_id"
                    [ngClass]="{ 'is-valid': source.get('type_id').valid
                    && (source.get('type_id').dirty || source.get('type_id').touched),
                    'is-invalid': source.get('type_id').invalid
                    && (source.get('type_id').dirty || source.get('type_id').touched)}"
                    formControlName="type_id"
                    required>
                  </ng-select>
                </div>

                <ng-container formArrayName="condition">
                    <label>Conditions</label>
                    <table class="table table-bordered">
                      <thead>
                      <tr>
                        <th>#</th>
                        <th>Name</th>
                        <th>Value</th>
                        <th>Operator</th>
                        <th>Action</th>
                      </tr>
                      </thead>
                      <tbody>
                      <tr *ngFor="let condition of source['controls'].condition['controls']; let iy=index" formArrayName="{{iy}}">
                        <td>{{iy + 1}}</td>
                        <td>
                          <select formControlName="name" class="form-control"
                                  [ngClass]="{ 'is-valid': condition.get('name').valid
                                   && (condition.get('name').dirty
                                   || condition.get('name').touched), 'is-invalid': condition.get('name').invalid
                                   && (condition.get('name').dirty || condition.get('name').touched)}"
                                  required>
                            <option *ngFor="let order of getFields(source.get('type_id').value); let i = index" [value]="order.name">
                              {{order.name}}
                            </option>
                          </select>
                        </td>
                        <td>
                          <input type="text" class="form-control" formControlName="value"
                                 [ngClass]="{ 'is-valid': condition.get('value').valid
                                   && (condition.get('value').dirty
                                   || condition.get('value').touched), 'is-invalid': condition.get('value').invalid
                                   && (condition.get('value').dirty || condition.get('value').touched)}"
                                 required>
                        </td>
                        <td>
                          <select formControlName="operator" class="form-control"
                                  [ngClass]="{ 'is-valid': condition.get('operator').valid
                                   && (condition.get('operator').dirty
                                   || condition.get('operator').touched), 'is-invalid': condition.get('operator').invalid
                                   && (condition.get('operator').dirty || condition.get('operator').touched)}"
                                  required>
                            <option *ngFor="let order of operators" [value]="order">
                              {{order}}
                            </option>
                          </select>
                        </td>
                        <td>
                          <button type="button" class="btn btn-outline-primary" (click)="delCondition(iy,s)">
                            <fa-icon [icon]="['far', 'trash-alt']"></fa-icon>
                          </button>
                        </td>
                      </tr>
                      </tbody>
                    </table>
                  </ng-container>
                <ng-template [ngIf]="source.get('type_id').value === null" [ngIfElse]="loadCondition">
                  <div class="alert alert-warning">
                    Please choose a type first!
                  </div>
                </ng-template>
                <ng-template #loadCondition>
                  <button type="button" class="btn btn-outline-secondary" (click)="addCondition(s)">+ Add Condition</button>
                </ng-template>
              </ng-container>
            </div>
          </div>
        </ng-container>
      </ng-container>
    </form>
  </div>

</div>
